﻿$(function () {

    //normally all you have to do is put in .scrollable, but if you ever
    //want to have multiple of these or multiple scrollable things, you 
    //need to be specific on what is being called
    $(".thumbnailcontainer .scrollable").scrollable();


    //another huge selector here to ensure that the img that I need is
    //being captured. 
    $(".thumbnailcontainer .scrollable .items img").click(function () {

        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        //I don't understand why I need this
        var url = $(this).attr("src").replace("_t", "");

        //ac code here	
        var $findalt = $(this).attr("src");
        var $firstindex = $findalt.lastIndexOf("/") + 1;
        var $lastindex = $findalt.indexOf(".");
        $findalt = $findalt.substring($firstindex, $lastindex);

        var $foundalt = "#" + $findalt;
        var $foundalt = $($foundalt);

        var $foundh3Text = $foundalt.find("h3").text();
        //var $foundstrongText = $foundalt.find("strong").text();
        var $foundpText = $foundalt.find("p").text();
        var $foundahrefLink = $foundalt.find("a").attr("href");
        var $foundahrefText = $foundalt.find("a").text();

        var wrapOriginal = $("#image_wrap");
        wrapOriginal.find("h3").text($foundh3Text);
        //wrapOriginal.find("strong").text($foundstrongText);
        wrapOriginal.find("p").text($foundpText);
        wrapOriginal.find("a").attr("href", $foundahrefLink);
        wrapOriginal.find("a").text($foundahrefText);
        //end ac code


        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function () {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);
        };

        img.src = url;

        // activate item
        $(".items img").removeClass("active");
        $(this).addClass("active");

        // when page loads simulate a "click" on the first image
    }).filter(":first").click();
});